* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
#boardContainer {
  margin: 0 auto;
  width: 1800px;
  height: 860px;
  display: flex;
}
#board {
  height: 100%;
  border: orange 2px solid;
  flex-grow: 1;
  position: relative;
}
#board .component-wrapper {
  position: absolute;
  border: 1px solid rgb(102, 102, 102);
  background-color: rgb(255, 255, 255);
}
#board .component-wrapper .hover-group {
  width: 100%;
  height: 100%;
  position: absolute;
  display: none;
}
#board .component-wrapper .hover-group .hover-line {
  position: absolute;
  cursor: move;
}
.hover-line.top,
.hover-line.bottom {
  width: 100%;
}
.hover-line.right,
.hover-line.left {
  height: 100%;
}
.hover-line.top {
  top: -2px;
  border-top: dashed 3px #e6a23c;
}
.component-wrapper.select .hover-line.top {
  border-top-style: solid;
}
.hover-line.right {
  right: -2px;
  border-right: dashed 3px #e6a23c;
}
.component-wrapper.select .hover-line.right {
  border-right-style: solid;
}
.hover-line.bottom {
  bottom: -2px;
  border-bottom: dashed 3px #e6a23c;
}
.component-wrapper.select .hover-line.bottom {
  border-bottom-style: solid;
}
.hover-line.left {
  left: -2px;
  border-left: dashed 3px #e6a23c;
}
.component-wrapper.select .hover-line.left {
  border-left-style: solid;
}
#board .component-wrapper .hover-group .hover-dot {
  position: absolute;
  width: 7px;
  height: 7px;
  background-color: #e6a23c;
  border-radius: 50%;
}
.hover-dot.left-top {
  top: -4px;
  left: -4px;
  cursor: nw-resize;
}
.hover-dot.top {
  top: -4px;
  left: 50%;
  transform: translateX(-50%);
  cursor: ns-resize;
}
.hover-dot.right-top {
  right: -4px;
  top: -4px;
  cursor: ne-resize;
}
.hover-dot.right {
  right: -4px;
  top: 50%;
  transform: translateY(-50%);
  cursor: ew-resize;
}
.hover-dot.right-bottom {
  right: -4px;
  bottom: -4px;
  cursor: se-resize;
}
.hover-dot.bottom {
  bottom: -4px;
  left: 50%;
  transform: translateX(-50%);
  cursor: ns-resize;
}
.hover-dot.left-bottom {
  left: -4px;
  bottom: -4px;
  cursor: sw-resize;
}
.hover-dot.left {
  left: -4px;
  top: 50%;
  transform: translateY(-50%);
  cursor: ew-resize;
}
#board .component-wrapper .default-component {
  height: 100%;
}
#menu {
  width: 200px;
  height: 100%;
  border: orange 2px solid;
  border-left: 0;
}
#menu .menu-button {
  border: 1px solid rgb(245, 218, 177);
  display: inline-block;
  margin: 10px 0 0 10px;
  padding: 12px 20px;
  background-color: rgb(253, 246, 236);
  color: rgb(230, 162, 60);
  font-size: 14px;
  border-radius: 4px;
  cursor: pointer;
}
#menu .menu-button:hover {
  background: #e6a23c;
  border-color: #e6a23c;
  color: #fff;
}